    @import "./com";
    // 头部
    header {
        // 导航栏
        .hdr_top {
            display: flex;
            justify-content: space-around;
            margin-top: vw(50);
            text-align: center;
            line-height: vw(57);
            p:nth-of-type(1) {
                width: vw(120);
                height: vw(57);
                border: 2px solid $col;
                border-radius: vw(30);
            }
            .sel {
                position: relative;
                select {
                    width: vw(160);
                    height: vw(60);
                    border: vw(1) solid $col;
                    box-sizing: border-box;
                    appearance: none;
                    padding-left: vw(20);
                    font-size: vw(26);
                }
                i {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    margin-top: vw(-10);
                    margin-right: vw(16);
                    width: 0;
                    height: 0;
                    border: vw(13) solid transparent;
                    border-top: vw(20) solid $col;
                    //穿透
                    pointer-events: none;
                }
            }
        }
        // 搜索框
        .sou_s {
            display: flex;
            justify-content: center;
            margin-top: vw(50);
            .inp {
                position: relative;
                width: vw(270);
                height: vw(52);
                border: 1px solid $col;
                border-radius: vw(26);
                box-sizing: border-box;
                &::after {
                    content: "";
                    position: absolute;
                    right: vw(16);
                    top: vw(8);
                    width: vw(36);
                    height: vw(34);
                    background: url(/images/index/搜索矩.png) no-repeat top/cover;
                }
                >input {
                    width: vw(183);
                    height: vw(34);
                    font-size: vw(24);
                    margin-left: vw(27);
                    line-height: vw(34);
                    border: none;
                    outline: none;
                    margin-top: vw(10);
                }
            }
        }
    }
    
    // 内容
    main {
        // 导航部分
        .bufen {
            p {
                margin-top: vw(35);
                text-align: center;
            }
            .hezi {
                margin: vw(17) auto 0;
                width: vw(530);
                ul {
                    height: vw(140);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    li {
                        text-align: center;
                        line-height: vw(65);
                        a {
                            display: inline-block;
                            width: vw(127);
                            height: vw(65);
                            background-color: #dcdcdc;
                            color: #898989;
                        }
                    }
                }
            }
        }
        // 热门
        .re_men {
            // 导航部分
            .tt {
                width: 100%;
                height: vw(100);
                line-height: vw(100);
                margin-top: vw(40);
                padding-left: vw(22);
                box-sizing: border-box;
                img {
                    vertical-align: middle;
                }
                span:nth-of-type(2) {
                    float: right;
                    margin-right: vw(20);
                    img {
                        width: vw(27);
                        height: vw(25);
                    }
                }
            }
            // 图片部分
            .tu {
                width: vw(710);
                margin: vw(35) auto 0;
                .tu_1 {
                    float: left;
                    img {
                        width: vw(278);
                        height: vw(352);
                    }
                }
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    li {
                        display: inline-block;
                        .tu_2 {
                            img {
                                width: vw(420);
                                height: vw(145);
                            }
                        }
                        .tu_3 {
                            img {
                                width: vw(195);
                                height: vw(195);
                            }
                        }
                        .tu_4 {
                            img {
                                width: vw(195);
                                height: vw(195);
                            }
                        }
                    }
                }
            }
            .dd {
                width: 100%;
                height: vw(100);
                line-height: vw(100);
                margin-top: vw(40);
                padding-left: vw(22);
                box-sizing: border-box;
                img {
                    vertical-align: middle;
                }
                span:nth-of-type(2) {
                    float: right;
                    margin-right: vw(20);
                    img {
                        width: vw(27);
                        height: vw(25);
                    }
                }
            }
            .tu_p {
                width: vw(710);
                margin: vw(45) auto 0;
                ul {
                    display: flex;
                    justify-content: space-between;
                    li {
                        a {
                            img {
                                width: vw(226);
                                height: vw(200);
                            }
                        }
                    }
                }
            }
        }
    }
    
    //底部导航栏
    nav {
        position: fixed;
        bottom: 0;
        margin-top: vw(14);
        width: vw(750);
        .nav_di {
            width: 100%;
            ul {
                display: flex;
                width: 100%;
                li {
                    flex-basis: 25%;
                    display: inline-block;
                    padding-left: vw(57);
                    a {
                        display: flex;
                        width: vw(77);
                        height: vw(77);
                        img {
                            width: 100%;
                            vertical-align: auto;
                        }
                    }
                }
            }
        }
    }